<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        /* .sec-wrapper{
            width: 500px;
            height: 500px;
            animation: run 60s;
        } */
        /* .sec{
            height: 300px;
            width: 4px;
            background-color: red;
            margin: 0 auto;
            
        } */


        /* 设置表的样式 */
        .clock{
            width: 500px;
            height: 500px;
            /* background-color: #bfa; */
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 50%;
            border:10px solid black;
            position: relative;
            /* 表的图片样式 */
            background-image:url(./img13/bg.png);
            /* 表盘大小 */
            background-size: cover;

        }

        .clock > div{
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

        }
        /* 设置时针 */
        .hour-wrapper{
           
            height: 70%;
            width: 70%;
            /* background-color: #bfa; */
            animation:  run 7200s linear infinite;
        }

        .hour{
            height: 50%;
            width:6px;
            background-color: #000;
            margin:0 auto;
        }
         /* 设置分针 */
         .min-wrapper{
           
           height: 80%;
           width: 80%;
           /* background-color: #bfa; */
           animation: run 600s steps(60) infinite;
       }

       .min{
           height: 50%;
           width:4px;
           background-color: #000;
           margin:0 auto;
       }
         /* 设置秒针 */
         .sec-wrapper{
           
           height: 95%;
           width: 95%;
           /* background-color: #bfa; */
           animation: run 10s steps(60) infinite;
       }

       .sec{
           height: 50%;
           width:2px;
           background-color:red;
           margin:0 auto;
       }
        /* 旋转的关键帧 */
        @keyframes run{
            from{
                transform: rotateZ(0);
            }
            to{
                transform:rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 创建表的容器 -->
        <div class="clock">
            <!-- 创建时针 -->
            <div class="hour-wrapper">
                <div class="hour"></div>
            </div>
             <!-- 创建分针 -->
             <div class="min-wrapper">
                <div class="min"></div>
            </div>
             <!-- 创建秒针 -->
             <div class="sec-wrapper">
                <div class="sec"></div>
            </div>
        </div>
</body>
</html>